﻿<%@ Page Title="Responsive Grid" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Grid.aspx.cs" Inherits="BeyondAdmin.WebForms.Pages.Grid" %>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <!-- Stacked To horizontal -->
    <h5 class="row-title before-blue">Stacked-to-horizontal</h5>
    <div class="grid-example">
        <div class="row">
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
        </div>
    </div>
    <!-- Mobile and Desktop -->
    <h5 class="row-title before-pink">Mobile and desktop</h5>
    <div class="grid-example">
        <div class="row">
            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
    <!-- Mobile, tablet, desktops -->
    <h5 class="row-title before-palegreen">Mobile, tablet, desktops</h5>
    <div class="grid-example">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <!-- Optional: clear the XS cols if their content doesn't match in height -->
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        </div>
    </div>
    <!-- Responsive Column Resets -->
    <h5 class="row-title before-orange">Responsive column resets</h5>
    <div class="grid-example">
        <div class="row">
            <div class="col-xs-6 col-sm-3">
                .col-xs-6 .col-sm-3
                                <br>
                Resize your viewport or check it out on your phone for an example.
            </div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

            <!-- Add the extra clearfix for only the required viewport -->
            <div class="clearfix visible-xs"></div>

            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        </div>
    </div>
    <!-- Offsetting Columns -->
    <h5 class="row-title before-sky">Offsetting columns</h5>
    <div class="grid-example">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
    </div>
    <!-- Nesting Columns -->
    <h5 class="row-title before-darkorange">Nesting columns</h5>
    <div class="grid-example">
        <div class="row">
            <div class="col-md-9">
                Level 1: .col-md-9
                                <div class="row">
                                    <div class="col-md-6">
                                        Level 2: .col-md-6
                                    </div>
                                    <div class="col-md-6">
                                        Level 2: .col-md-6
                                    </div>
                                </div>
            </div>
        </div>
    </div>
    <!-- Column Ordering -->
    <h5 class="row-title before-azure">Column ordering</h5>

    <div class="grid-example">
        <div class="row">
            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Scripts" ContentPlaceHolderID="PageScriptContent" runat="server">
</asp:Content>
